<template>
  <div class="user-index">
    <div class="welcome-section">
      <h1>欢迎回来，{{ userStore.userInfo?.name }}！</h1>
      <p>校事达任务管理系统 - 让校园生活更便捷</p>
    </div>
    
    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon published">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.publishedTasks }}</div>
              <div class="stat-label">已发布任务</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon accepted">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.acceptedTasks }}</div>
              <div class="stat-label">已接受任务</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon completed">
              <el-icon><Trophy /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.completedTasks }}</div>
              <div class="stat-label">已完成任务</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-content">
              <div class="stat-icon balance">
                <el-icon><Money /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">¥{{ userStore.userInfo?.balance || 0 }}</div>
                <div class="stat-label">账户余额</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="main-content">
      <el-col :span="16">
        <el-card class="recent-tasks">
          <template #header>
            <div class="card-header">
              <span>最近任务</span>
              <el-button type="primary" @click="$router.push('/user/new-task')">
                发布新任务
              </el-button>
            </div>
          </template>
          
          <el-table :data="recentTasks" v-loading="loading">
            <el-table-column prop="title" label="任务标题" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">
                  {{ getStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="reward" label="奖励" width="100">
              <template #default="{ row }">
                ¥{{ row.reward }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="发布时间" width="150" />
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button size="small" @click="viewTask(row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="quick-actions">
          <template #header>
            <span>快速操作</span>
          </template>
          
          <div class="action-buttons">
            <el-button type="primary" @click="$router.push('/user/new-task')" class="action-btn">
              <el-icon><Plus /></el-icon>
              发布任务
            </el-button>
            
            <el-button @click="$router.push('/user/published-tasks')" class="action-btn">
              <el-icon><Document /></el-icon>
              我的任务
            </el-button>
            
            <el-button @click="$router.push('/user/accepted-tasks')" class="action-btn">
              <el-icon><Check /></el-icon>
              接受的任务
            </el-button>
            
            <el-button @click="$router.push('/user/profile')" class="action-btn">
              <el-icon><User /></el-icon>
              个人资料
            </el-button>
          </div>
        </el-card>
        
        <el-card class="announcements" style="margin-top: 20px;">
          <template #header>
            <span>系统公告</span>
          </template>
          
          <div class="announcement-list">
            <div class="announcement-item">
              <div class="announcement-title">欢迎使用校事达系统</div>
              <div class="announcement-time">2024-12-20</div>
            </div>
            <div class="announcement-item">
              <div class="announcement-title">系统维护通知</div>
              <div class="announcement-time">2024-12-19</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '../../stores/user'
import { ElMessage } from 'element-plus'
import api from '../../utils/api'

const userStore = useUserStore()
const loading = ref(false)
const recentTasks = ref([])

const stats = reactive({
  publishedTasks: 0,
  acceptedTasks: 0,
  completedTasks: 0
})

const getStatusText = (status) => {
  const statusMap = {
    0: '待解决',
    1: '已关闭',
    2: '解决中',
    3: '已完成'
  }
  return statusMap[status] || '未知'
}

const getStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'info',
    2: 'primary',
    3: 'success'
  }
  return typeMap[status] || 'info'
}

const loadRecentTasks = async () => {
  loading.value = true
  try {
    // 获取所有任务，但过滤掉已完成的任务
    const response = await api.get('/tasks')
    if (response.data.code === 200) {
      // 过滤掉已完成的任务（status === 3）
      const activeTasks = response.data.data.filter(task => task.status !== 3)
      recentTasks.value = activeTasks.slice(0, 5) // 只显示最近5个
      stats.publishedTasks = activeTasks.length
    }
  } catch (error) {
    console.error('加载任务失败:', error)
  } finally {
    loading.value = false
  }
}

const loadAcceptedTasks = async () => {
  try {
    const response = await api.get('/user/tasks/accepted')
    if (response.data.code === 200) {
      stats.acceptedTasks = response.data.data.length
      stats.completedTasks = response.data.data.filter(task => task.status === 3).length
    }
  } catch (error) {
    console.error('加载接受任务失败:', error)
  }
}

const viewTask = (task) => {
  // 实现查看任务详情
  ElMessage.info('查看任务详情功能开发中...')
}

onMounted(() => {
  loadRecentTasks()
  loadAcceptedTasks()
})
</script>

<style scoped>
.user-index {
  padding: 20px;
}

.welcome-section {
  text-align: center;
  margin-bottom: 30px;
}

.welcome-section h1 {
  color: #333;
  margin-bottom: 10px;
}

.welcome-section p {
  color: #666;
  font-size: 16px;
}

.stats-cards {
  margin-bottom: 30px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: white;
}

.stat-icon.published {
  background: #409eff;
}

.stat-icon.accepted {
  background: #67c23a;
}

.stat-icon.completed {
  background: #e6a23c;
}

.stat-icon.balance {
  background: #f56c6c;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-btn {
  width: 100%;
  justify-content: flex-start;
}

.announcement-list {
  max-height: 200px;
  overflow-y: auto;
}

.announcement-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.announcement-item:last-child {
  border-bottom: none;
}

.announcement-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.announcement-time {
  font-size: 12px;
  color: #999;
}
</style>
